<template>
    <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true">
        <el-form-item>
            <!-- <el-input v-model="searchObj.name" placeholder="讲师"/> -->
            <el-autocomplete
            class="inline-input"
            v-model="searchObj.name"
            :fetch-suggestions="querySearch"
            placeholder="讲师"
            :trigger-on-focus="false"
            value-key="name"
          ></el-autocomplete>
        </el-form-item>

        <el-form-item>
            <el-select v-model="searchObj.level" clearable placeholder="头衔">
                <el-option value="1" label="高级讲师"/>
                <el-option value="2" label="首席讲师"/>
            </el-select>
        </el-form-item>

        <el-form-item label="入驻时间">
            <el-date-picker
            v-model="searchObj.joinDateBegin"
            placeholder="开始时间"
            value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="-">
            <el-date-picker
            v-model="searchObj.joinDateEnd"
            placeholder="结束时间"
            value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
        </el-form-item>
        <el-button type="danger" icon="el-icon-delete" @click="removeByIds()">批量删除</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" style="float:right" @click="jumpToAdd()">添加</el-button>
    </el-form>
    <!-- 表格 -->
    <el-table :data="list" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column
        label="编号"
        width="50">
        <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="80" />
        <el-table-column label="头衔" width="90">
            <template slot-scope="scope">
            <el-tag v-if="scope.row.level === 1" type="success" size="mini">高级讲师</el-tag>
            <el-tag v-if="scope.row.level === 2" size="mini">首席讲师</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="intro" label="简介" />
        <el-table-column prop="sort" label="排序" width="60" />
        <el-table-column prop="joinDate" label="入驻时间" width="160" />
        <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/'+scope.row.id">
            <el-button 
            type="primary" 
            icon="el-icon-edit" 
            circle
            size="mini"></el-button>
          </router-link>
          <el-button 
          style="margin-left:15px"
          type="danger" 
          size="mini"
          icon="el-icon-delete" 
          circle
          @click="removeById(scope.row.id)"></el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
    style="margin-top:30px;float:right"
    background
    :current-page="page"
    layout="total,sizes,prev, pager, next,jumper"
    :page-sizes="[12,15,20]"
    :page-size="limit"
    :total="total"
    @current-change="changeCurrentPage"
    @size-change="changePageSize">
    </el-pagination>
    </div>
</template>

<script>
import teacherApi from '@/api/teacher'
export default {
  // 定义数据模型
  data() {
    return {
        list: [], // 讲师列表
        total:0, //总记录数
        page: 1, // 页码
        limit: 12, // 每页记录数
        searchObj: {},// 查询条件
        mutipleSelection:[], //批量选中的记录列表

    }
  },

  // 页面渲染成功后获取数据
  created() {
    this.fetchData()
  },

  // 定义方法
  methods: {
    fetchData() {
      // 调用api
      teacherApi.pageList(this.page,this.limit,this.searchObj).then(response => {
        this.list = response.data.rows;
        this.total = response.data.total;
      })
    },
    changeCurrentPage(page){
        this.page = page;
        this.fetchData();
    },
    changePageSize(limit){
        this.limit = limit;
        this.fetchData();
    },
    resetData(){
        this.searchObj={};
        this.fetchData();
    },
    removeById(id){
        //选择是否删除
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return teacherApi.removeById(id);
          }).then(response =>{
              this.fetchData();  
              this.$message({
              type: 'success',
              message: '删除成功!'
          });
        }).catch(response => {
          if(response === 'cancel'){
              this.$message({
              type: 'info',
              message: '已取消删除'
            }); 
          }   
        });
    },
    jumpToAdd(){
        this.$router.push({path:'/teacher/create'});
    },
    //多选项发生变化触发
    handleSelectionChange(selection){
      this.mutipleSelection = selection;
    },
    //批量删除
    removeByIds(){
      //选中为0
      if(this.mutipleSelection.length === 0){
        this.$message({
            type: 'warning',
            message: '请选择删除项'
          }); 
          return false;         
      }
      //选择是否删除
      this.$confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //拿到数据
        const idList = [];
        this.mutipleSelection.forEach(item => {
          idList.push(item.id);
        });
        return teacherApi.removeByIds(idList);
        }).then(response =>{
            this.fetchData();  
            this.$message({
            type: 'success',
            message: response.message
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    //输入建议
    querySearch(queryString, callback){
      teacherApi.selectNameListByKey(queryString).then(response =>{
        callback(response.data.nameList)
      })
    }
  }
}
</script>